<template>
	<view class="box">
		<view class="top">
			<view class="input">
				<u-search v-model="search.keyword" :show-action="true" placeholder="请输入搜索内容" actionText="搜索"
					:animation="true" :clearabled="true"  @search="goResult(search.keyword)"
					@custom="goResult(search.keyword)" @clear="goSearch" @focus="goSearch"></u-search>
			</view>
		</view>
		<!-- 结果列表 -->
		<view class="list fw-bt" v-if="list.length">
			<view class="shop-demo" v-for="(item,index) of list" :key="index" @click="goShopDetail(item.product_id)">
				<!--图片 -->
				<view class="shop-img f-w">
					<image :src="item.image" mode=""></image>
				</view>
				<!-- 名字 -->
				<view class="shop-name hide-line2 bold f28">{{item.store_name}}</view>
				<!-- 店名 -->
				<view class="shop-name2 hide-line2">
					{{item.merchant.mer_name}}
				</view>
				<view class="shop-price fw-bt c3">
					<!-- 价格 -->
					<view class="f-w">
						<view class="f24">￥</view>
						<view class="bold f28">{{item.price}}</view>
					</view>
					<!-- 购买按钮 -->
					<!-- <view class="shop-btn"
						@click.stop="addcart(item.product_id,item.productAttrValue.attrValue[0].unique,item.product_type)">
						<image src="https://jw.xzsw2021.com/static/index/icon_49@2x.png" mode=""></image>
					</view> -->
					<view class="" @click.stop>
						<rules :product_id="item.product_id">
							<view class="shop-btn">
								<image src="https://jw.xzsw2021.com/static/index/icon_49@2x.png" mode=""></image>
							</view>
						</rules>
					</view>


				</view>
				<!-- 商品图标 -->
				<view class="shop-tag">
					<image :src="item.shop_img" mode=""></image>
				</view>
				<!-- 精选好物 -->
				<view class="shop-good" v-if="item.good">
					<image :src="item.good" mode=""></image>
				</view>
				<!-- 最近浏览过 -->
				<view class="shop-history c3 f22" v-if="item.desc">{{item.desc}}</view>
			</view>
		</view>
		<view class="none" v-else-if="isShowNo">
			<view class="nimg">
				<image src="https://jw.xzsw2021.com/static/client/icon_66@2x.png" mode=""></image>
			</view>
			<view class="ndesc">抱歉，未能找到您搜索的商品</view>
		</view>
	</view>
</template>

<script>
	import rules from '@/components/rules.vue'
	import {
		getProductSpuListApi
	} from '@/api/product.js'
	export default {
		components: {
			rules
		},
		data() {
			return {
				list: [], //
				isShowNo: false,
				search: {
					page: 1,
					keyword: '',
					limit: 10,
					// mar_id: 0
				}
			}
		},
		watch: {
			keyword(n, o) {
				console.log('新：' + n, '旧：' + o);
				if (n == '') {
					this.lenovoData = [];
				}
			}
		},
		onLoad(options) {
			// this.search.mar_id = options.id
			if (options.keyword) {
				this.search.keyword = options.keyword
			}
			this.search.page = 1
			this.getlist()

		},
		onReachBottom() {
			this.search.page += 1
			this.getlist()
		},
		methods: {
			// 加入购物车
			addcart(id, unique, type) {
				uni.showLoading({
					mask: true
				})
				let data = {
					cart_num: 1,
					is_new: 0,
					product_attr_unique: unique,
					product_id: id,
					product_type: type
				}
				this.$request('user/cart/create', data).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: "添加成功"
						})
					}
				})
			},
			getlist(e) {
				// let data = {
				// 	keyword: this.keyword,
				// 	page: this.page,
				// 	limit: 10,
				// 	mar_id: this.id
				// }
				// this.$request('product/spu/lst', data, 'GET').then(res => {
				// 	this.list = res.data.list
				// })
				this.isShowNo = false
				getProductSpuListApi(this.search).then(res => {
					if (this.search.page > 1) {
						this.list.push(...res.data.list)
					} else {
						this.list = res.data.list
					}
					this.isShowNo = true
				}).catch(err => {
					this.isShowNo = true
				})
			},

			// 搜索结果
			goResult(value) {
				this.search.page = 1
				console.log('传输：', value);

			},
			// 清除重回搜索页
			goSearch() {
				uni.navigateBack()
			},
			goShopDetail(id) {
				uni.navigateTo({
					url: "/pages/client/shop/shop-detail/shop-detail?id=" + id
				})
				console.log('购买商品');
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F5F5F5;
	}

	.box {
		.c1 {
			color: #109C7A;
			font-weight: bold;
		}

		.c2 {
			color: #FCA223;
		}

		.c3 {
			color: #F45E14;
		}

		.top {
			.input {
				padding: 30rpx 20rpx;
			}

			.lenovo {
				&>view {
					padding: 26rpx 20rpx;
					border-bottom: 1rpx solid #eee;
				}
			}
		}

		.list {
			padding: 30rpx 20rpx;
			flex-wrap: wrap;
			background-color: #F5F5F5;

			.shop-btn {
				width: 40rpx;
				height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.shop-demo {
				position: relative;
				margin-bottom: 20rpx;
				width: 344rpx;
				padding: 55rpx 26rpx 40rpx;
				// min-height: 568rpx;
				background: #FFFFFF;
				border-radius: 20rpx;
				box-sizing: border-box;

				.shop-img {
					width: 284rpx;
					height: 284rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shop-name {
					margin: 20rpx 0 10rpx;
				}

				.shop-name2 {
					height: 64rpx;
					font-size: 24rpx;
					color: #666;
				}

				.shop-price {
					// margin-top: 28rpx;
				}

				.shop-tag {
					position: absolute;
					top: 16rpx;
					left: 16rpx;
					width: 60rpx;
					height: 60rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shop-good {
					position: absolute;
					top: 0;
					right: 16rpx;
					width: 53rpx;
					height: 71rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.shop-history {
					position: absolute;
					top: 12rpx;
					left: 50%;
					transform: translateX(-50%);
					width: 175rpx;
					text-align: center;
					white-space: nowrap;
					overflow: hidden;
				}

				// 相似
				.shop-xiangsi {
					position: absolute;
					top: 0;
					left: 0;
					width: 344rpx;
					min-height: 584rpx;
					border-radius: 20rpx;
					background-color: rgba(0, 0, 0, .5);
					z-index: 3;

					.shop-xs2 {
						margin: 250rpx auto;
						width: 280rpx;
						height: 68rpx;
						line-height: 68rpx;
						background: #F3F3F3;
						border-radius: 34rpx;
						text-align: center;
						color: #109C7A;
						font-size: 26rpx;

						image {
							margin-right: 12rpx;
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
		}

		.none {
			margin-top: 130rpx;

			.nimg {
				margin: 0 auto;
				width: 366rpx;
				height: 330rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.ndesc {
				margin-top: 25rpx;
				text-align: center;
				color: #666;
				font-size: 30rpx;
			}
		}
	}
</style>
